<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="22">
            <img style="width: 45px;margin-top: 5px;" src="../../public/icons/logo.svg" alt="">
            <h1 style="display: inline;position: absolute;left: 65px;">Apex PMS</h1>
          </el-col>
          <el-col :span="2" style="padding: 0 10px 0 25px;">
            <span>{{ userInfo.nickname }}</span>
            <el-dropdown style="float: right;margin-top: 10px;" @command="handleCommand">
              <el-avatar shape="circle" size="large" :src="userInfo.avatar"></el-avatar>
              <el-dropdown-menu slot="dropdown" :split-button="true">
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-dialog title="个人信息" :visible.sync="dialogFormVisible" width="20%">
          <div>
            <el-avatar shape="circle" :size="50" :src="userInfo.avatar"></el-avatar>
          </div>
          <div style="font-size: 20px;">
            用户名：<el-tag type="success">{{ userInfo.username }}</el-tag>
          </div>
          <div style="font-size: 20px;">
            昵称：<el-tag type="success">{{ userInfo.nickname }}</el-tag>
          </div>
          <div style="font-size: 20px;">
            邮箱：<el-tag type="success">{{ userInfo.email ? userInfo.email : "无" }}</el-tag>
          </div>
          <div style="font-size: 20px;">
            手机号：<el-tag type="success">{{ userInfo.telephone ? userInfo.telephone : "无" }}</el-tag>
          </div>
          <div style="font-size: 20px;">
            最后登录时间：<el-tag type="success">{{ userInfo.loginTime }}</el-tag>
          </div>
      </el-dialog>

      <el-container>
        <el-aside width="200px">
          <el-menu style="border: 0;height: 100%;"
                   router
                   :default-active="$router.currentRoute.path"
                   class="el-menu-vertical-demo"
                   background-color="#3c9566"
                   text-color="#fafafa"
                   active-text-color="#222b45">

            <!-- 控制台 -->
            <el-menu-item index="/dashboard">
              <img class="icon" src="../../public/icons/dashboard.svg" alt="">
              <span slot="title">控制台</span>
            </el-menu-item>

            <!-- 小区管理 -->
            <el-menu-item index="/community/index">
              <img class="icon" src="../../public/icons/community.svg" alt="">
              <span slot="title">小区管理</span>
            </el-menu-item>

            <!-- 房产管理 -->
            <el-submenu index="3">
              <template slot="title">
                <img class="icon" src="../../public/icons/house.svg" alt="">
                <span>房产管理</span>
              </template>
              <el-menu-item index="/house/index">
                <span>房产管理</span>
              </el-menu-item>
              <el-menu-item index="/house/building">
                <span>楼栋管理</span>
              </el-menu-item>
            </el-submenu>

            <!--业主信息管理菜单栏开始-->
            <el-submenu index="4">
              <template slot="title">
                <img class="icon" src="../../public/icons/owners.svg" alt="">
                <span>业主信息管理</span>
              </template>
              <el-menu-item index="/owners/index">
                <span>人员管理</span>
              </el-menu-item>
              <el-menu-item index="/owners/vehicle">
                <span>车辆管理</span>
              </el-menu-item>
              <el-menu-item index="/owners/pet">
                <span>宠物管理</span>
              </el-menu-item>
            </el-submenu>
            <!--业主信息管理菜单结束-->

            <!-- 停车位管理 -->
            <el-submenu index="5">
              <template slot="title">
                <img class="icon" src="../../public/icons/parking.svg" alt="">
                <span>停车位管理</span>
              </template>
              <el-menu-item index="/parking/index">
                <span>车位管理</span>
              </el-menu-item>
              <el-menu-item index="/parking/usage">
                <span>车位使用管理</span>
              </el-menu-item>
            </el-submenu>

            <!-- 服务管理 -->
            <el-submenu index="6">
              <template slot="title">
                <img class="icon" src="../../public/icons/service.svg" alt="">
                <span>服务管理</span>
              </template>
              <el-menu-item index="/service/activity">
                <span>活动管理</span>
              </el-menu-item>
              <el-menu-item index="/service/repair">
                <span>保修管理</span>
              </el-menu-item>
              <el-menu-item index="/service/complain">
                <span>投诉管理</span>
              </el-menu-item>
              <el-menu-item index="/service/mailbox">
                <span>信箱管理</span>
              </el-menu-item>
            </el-submenu>

            <!-- 资产设备管理 -->
            <el-menu-item index="/device/index">
              <img class="icon" src="../../public/icons/device.svg" alt="">
              <span slot="title">资产设备管理</span>
            </el-menu-item>

            <!-- 收费管理 -->
            <el-submenu index="8">
              <template slot="title">
                <img class="icon" src="../../public/icons/expenses.svg" alt="">
                <span>收费管理</span>
              </template>
              <el-menu-item index="/expenses/index">
                <span>收费明细管理</span>
              </el-menu-item>
              <el-menu-item index="/expenses/project">
                <span>收费项目管理</span>
              </el-menu-item>
            </el-submenu>

            <!-- 值班管理 -->
            <el-menu-item index="/duty/index">
              <img class="icon" src="../../public/icons/duty.svg" alt="">
              <span slot="title">值班管理</span>
            </el-menu-item>

            <!-- 权限管理 -->
            <el-submenu index="10">
              <template slot="title">
                <img class="icon" src="../../public/icons/auth.svg" alt="">
                <span>权限管理</span>
              </template>
              <el-menu-item index="/auth/admin">
                <span>操作员管理</span>
              </el-menu-item>
              <el-menu-item index="/auth/adminlog">
                <span>操作员日志</span>
              </el-menu-item>
              <el-menu-item index="/auth/rule">
                <span>规则管理</span>
              </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      userInfo: {},
      dialogFormVisible: false,
    }
  },
  methods: {
    checkJwt() {
      let jwt = localStorage.getItem("jwt");
      let url = this.host + "/user/checkJwt?jwt=" + jwt;
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.userInfo = response.data.data;
        } else {
          this.$message.error(response.data.message);
          this.$router.push("/login");
        }
      });
    },
    handleCommand(command) {
      if (command == "logout") {
        localStorage.clear();
        this.$message.success("已退出登录！");
        this.$router.push("/login");
      } else {
        this.dialogFormVisible = true;
      }
    }
  },
  mounted() {
    this.checkJwt();
  }
}
</script>

<style scoped>
.el-header {
  position: fixed;
  right: 0;
  left: 0;
  background-color: #248067;
  color: white;
  line-height: 60px;
  z-index: 10;
}

.el-aside {
  height: 100%;
  position: fixed;
  margin-top: 60px;
  z-index: 9;
}

.el-main {
  margin-top: 60px;
  margin-left: 200px;
}

.icon {
  width: 20px;
  margin-right: 5px;
}

.el-menu-item.is-active {
  background: #66c18c !important;
}
</style>
